<template>
	<div>
		<div class="navbar"><navbar></navbar></div>
		<editbanner left="头像" class="head">
			<a href="javascript:;" slot="right">
				<van-uploader class="upload" preview-size="40px" :after-read="afterRead" />
				<img :src="model.user_img" v-if="model.user_img" />
				<img src="../assets/default_img.jpg" v-else />
			</a>
		</editbanner>
		<editbanner left="昵称" @changename="show = true">
			<a href="javascript:;" slot="right" class="atext">{{ model.name }}</a>
		</editbanner>
		<editbanner left="UID">
			<a href="javascript:;" slot="right" class="atext">{{ model.username }}</a>
		</editbanner>
		<editbanner left="性别" @changename="gendershow = true">
			<a href="javascript:;" slot="right" class="atext">{{ model.gender == 1 ? '男' : '女' }}</a>
		</editbanner>
		<editbanner left="出生日期"></editbanner>
		<editbanner left="个性签名" slot="right" @changename="person = true">
			<a href="javascript:;" slot="right" class="atext">{{ model.user_desc }}</a>
		</editbanner>

		<div class="dv_btn">
			<div @click="loginout" class="closebtn">退出登录</div>
			<div @click="backUserInfo" class="closebtn">返回空间</div>
		</div>

		<!-- 弹出框，放在任意位置都可以 -->
		<van-dialog v-model="show" title="昵称" show-cancel-button @confirm="confirmclick" @cancel="text = ''" confirm-button-color="#1989FA">
			<van-field v-model="text" autofocus="true" placeholder="请输入昵称" />
		</van-dialog>

		<!-- 个性签名 -->
		<van-dialog v-model="person" title="个性签名" show-cancel-button confirm-button-color="#1989FA" @confirm="confirmperson" @cancel="textperson = ''">
			<van-field v-model="textperson" autofocus="true" placeholder="请输入个性签名" />
		</van-dialog>

		<!-- 动作面板性别 -->
		<van-action-sheet v-model="gendershow" :actions="actions" cancel-text="取消" close-on-click-action @select="onSelect" />
	</div>
</template>

<script>
import navbar from '../components/common/Navbar.vue';
import editbanner from '../components/common/EditBanner.vue';

export default {
	data() {
		return {
			name: '',
			username: '',
			user_img: '',
			model: {},
			show: false,
			person: false,
			text: '',
			textperson: '',
			gendershow: false,
			actions: [{ name: '男', val: 1 }, { name: '女', val: 0 }],
			minDate: new Date(1990, 0, 1),
			maxDate: new Date(2020, 10, 1),
			currentDate: new Date()
		};
	},
	methods: {
		async getselect() {
			const res = await this.$http.get('/user/' + localStorage.getItem('id'));
			console.log(res);
			this.name = res.data[0].name;
			this.username = res.data[0].username;
			this.user_img = res.data[0].user_img;
			this.model = res.data[0];
		},
		async afterRead(file) {
			// 此时可以自行将文件上传至服务器
			console.log(file);
			// 需要以fromdata形式上传
			const fromdata = new FormData();
			// file键，file值传上去
			fromdata.append('file', file.file);
			const res = await this.$http.post('/upload', fromdata);
			console.log(res);
			this.model.user_img = res.data.url;
			if (this.model.user_img) {
				setTimeout(() => {
					this.$msg('更新成功');
				}, 1000);
			}
			this.updateimg();
		},
		// 更新后台个人信息数据
		async updateimg() {
			const res = this.$http.post('/update/' + localStorage.getItem('id'), this.model);
			console.log(res);
			console.log(this.model);
			if (res) {
				this.$msg('更新成功');
			}
		},
		confirmclick() {
			this.model.name = this.text;
			this.updateimg();
			this.text = '';
		},
		onSelect(data) {
			this.model.gender = data.val;
			this.updateimg();
		},
		confirmperson() {
			this.model.user_desc = this.textperson;
			this.updateimg();
			this.textperson = '';
		},
		loginout() {
			console.log('loginout');
			localStorage.removeItem('id');
			localStorage.removeItem('token');
			this.$router.push('/login');
		},
		backUserInfo() {
			console.log('back');
			this.$router.back();
		}
	},
	created() {
		this.getselect();
	},
	components: {
		navbar,
		editbanner
	}
};
</script>

<style>
.navbar {
	margin-bottom: 10px;
}
.atext {
	color: #333;
}
a img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
}
.head {
	position: relative;
	display: flex;
	align-items: center;
}
.head a {
	display: block;
}
.head img {
	width: 46px;
	height: 46px;
}
.upload {
	position: absolute;
	right: -50px;
	opacity: 0;
}
.dv_btn {
	margin-top: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.closebtn {
	width: 91%;
	background-color: white;
	padding: 15px;
	font-size: 14px;
	color: #333;
	display: flex;
	justify-content: center;
	border-bottom: 1px solid #f4f4f4;
}
</style>
